<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>珠宝小程序-商家后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <link rel="stylesheet" href="/static/css/news.css">
    <script type="text/javascript" src="/static/js/base64.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
  <span class="layui-breadcrumb">
    <a href="">门店信息</a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <form class="layui-form" id="admin">
        <div class="layui-form-item">
            <label for="type_name" class="layui-form-label">
                <span class="x-red">*</span>店面名称
            </label>
            <div class="layui-input-inline">
                <input type="text" value="{$info.name}" disabled autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="type_name" class="layui-form-label">
                <span class="x-red">*</span>户名
            </label>
            <div class="layui-input-inline">
                <input type="text" value="{$info.username}" disabled autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="type_name" class="layui-form-label">
                <span class="x-red">*</span>开户行
            </label>
            <div class="layui-input-inline">
                <input type="text" value="{$info.bank}" disabled autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="type_name" class="layui-form-label">
                <span class="x-red">*</span>账号
            </label>
            <div class="layui-input-inline">
                <input type="text" value="{$info.number}" disabled autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">
                <span class="x-red">*</span>电话
            </label>
            <div class="layui-input-inline">
                <input type="text" id="phone" value="{$info.phone}" name="phone" required="" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>
        <div class="layui-form-item" id="x-city" style='width:80%;'>
            <label class="layui-form-label">店铺地址：</label>
            <div style='float:left;width:80%;'>
                <div class="layui-input-inline" style='width:80%;display:block;margin-top:10px;'>
                    <input id="address" name="address" type="textbox" class="layui-input" placeholder="请输入详细地址" value="{$info.address}" onchange="codeAddress()">
                </div>
                <div class="layui-input-inline" style='width:40%;display:block;margin-top:10px;'>
                    <label>经度</label><input type="textbox" class="layui-input" name='lng' value='{$info.lng}' id='longitude'>
                </div>
                <div class="layui-input-inline" style='width:40%;display:block;margin-top:10px;'>
                    <label>纬度</label><input type="textbox" class="layui-input" name='lat' value='{$info.lat}' id='latitude'>
                </div>
                <div class="layui-input-inline" style='width:80%;display:block;margin-top:10px;'>
                   <div id="container" style='height:500px;'></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="goods_img" class="layui-form-label">
                <span class="x-red">*</span>店面图片
            </label>
            <div class="layui-input-inline layui-upload" id="upload-thumb">
                <button type="button" class="layui-btn layui-btn-primary" id="image"><i class="layui-icon"></i>上传图片</button>
                <div class="layui-upload-list">
                    {if condition = "$info.img  neq '' "}
                        <img src="{$info['img']}" class="layui-upload-list" id="demo" width="350" height="250">
                        {else/}
                        <img class="layui-upload-list imgsc" width="350" height="250" id="demo">
                        <p id="demoText"></p>
                    {/if}
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="goods_day" class="layui-form-label">
                <span class="x-red">*</span>图文简介
            </label>
            <div class="layui-input-inline" style="width: 50%;">
                <textarea id="store_desc"  style="height: 320px;" name="store_desc">{$info.store_desc}</textarea>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label"></label>
            <button  class="layui-btn" lay-filter="admin" lay-submit>修改</button>
        </div>
    </form>
</div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="/static/utf8-php/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/utf8-php/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var store_desc = UE.getEditor('store_desc');
</script>
<script>
    //定义地图，标记数组
    var map,markersArray = [];

    //设置地图中心点
    var add =  $('#latitude').val();
    //如果已有地址就以现有地址确定中心点
    
    if(add){
        var center = new qq.maps.LatLng($('#latitude').val(),$('#longitude').val());
    }else{
        var center = new qq.maps.LatLng(22.64059796698956,114.01225090026855);
    }
    //设置中心点
    map = new qq.maps.Map(document.getElementById('container'),{
        center: center,//中心点经纬度
        zoom: 13//缩放程度
    });

    //设置默认标记点
    addMarker(center);

    //添加dom监听事件
    qq.maps.event.addDomListener(map, 'click', function(event) {
        // alert(event.latLng)
        $("#longitude").val(event.latLng.getLng());
        $("#latitude").val(event.latLng.getLat());
        codeLatLng(event.latLng);
        //清除原标记点
        deleteOverlays();
        //添加新标记点
        addMarker(event.latLng);
    });

    //反解析
    var info = new qq.maps.InfoWindow({map: map});


    //解析
    geocoder = new qq.maps.Geocoder({
        complete : function(result){
            map.setCenter(result.detail.location);
            //清除原标记点
            deleteOverlays();
            clearOverlays();
            var marker = new qq.maps.Marker({
                map:map,
                position: result.detail.location
            });
            markersArray.push(marker);
            var input = result.detail.location;

            //将解析的经纬度赋值给input
            $("#longitude").val(input.lng);
            $("#latitude").val(input.lat);
            console.log(input.lng);
            console.log(input.lat);
            //将反解析的地址传给input
            $("#address").val(result.detail.address);
            // alert(result.detail.address);

        }
    });
    

    //添加标记
    function addMarker(location) {
        var marker = new qq.maps.Marker({
            position: location,
            map: map
        });
        markersArray.push(marker);
    }

    //清除覆盖层
    function clearOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
        }
    }

    //删除覆盖物
    function deleteOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
    }

    //地址解析，将位置转化为经纬度
    function codeAddress() {
        var address = document.getElementById("address").value;
        //通过getLocation();方法获取位置信息值
        geocoder.getLocation(address);
    }

    //反地址解析，将经纬度转化为位置
    function codeLatLng(latLng) {
        //获取经纬度数值   按照,分割字符串 取出前两位 解析成浮点数
        // var latLng = new qq.maps.LatLng(lat, lng);
        // alert(latLng);
        //调用信息窗口
        // var info = new qq.maps.InfoWindow({map: map});
        //调用获取位置方法
        geocoder.getAddress(latLng);
        // alert(latLng);
    }
</script>
<script>
    layui.use(['form','upload','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,upload = layui.upload
            ,layer = layui.layer;

         //普通图片上传
        var uploadInst = upload.render({
            elem: '#image',
            url: "{:url('Upload/upimage_s')}",
            ext: 'jpg|png|gif',
            drag:false,
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res){
                //如果上传失败
                if(res.code == 200 ){
                    $('#demo').attr('src',res.src);
                    $('#upload-thumb').append('<input type="hidden" name="img" value="'+ res.data.path +'">');
                }else {

                    layer.msg(res.msg);
                }
                //上传成功
            },
            error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        // $(window).on('load', function() {
            form.on('submit(admin)', function(data) {
                var phone = $("input[name='phone']").val();
                var address = $("input[name='address']").val();
                var lng = $("input[name='lng']").val();
                var lat = $("input[name='lat']").val();
                if($("input[name='img']").val()){
                    var img = $("input[name='img']").val();
                }else{
                    var img = '';
                }
                var store_desc = base64.encode(UE.getEditor('store_desc').getContent());
                layer.msg('数据提交中...',{time:500000});
                $.ajax({
                    url:"{:url('StoreInfo/save')}",
                    data:{phone:phone,address:address,lng:lng,lat:lat,img:img,store_desc:store_desc},
                    type:'post',
                    async: false,
                    success:function(res) {
                        if(res.code == 200) {
                            layer.msg(res.msg, {icon: 6})
                            setInterval("location.reload()",2000);
                        } else {
                            layer.msg(res.msg,{icon: 2});
                        }
                    }
                });
                return false;
            });
        // });
    });
</script>
{include file="public/footer"/}